<template>
  <div>
    <div class="header">
      <div class="header-item">
        角色名称：<el-input
          style="width: 180px"
          size="small"
          clearable
          v-model="search.roleName"
          placeholder="请输入角色名称"
        />
      </div>
      <div class="header-item">
        <el-button
          @click="searchData"
          size="small"
          type="primary"
        >
          搜索
        </el-button>
        <el-button
          @click="f5"
          size="small"
          type="success"
        >
          刷新
        </el-button>
      </div>
      <div
        class="header-item"
        style="float: right"
      >
        <el-button
          size="small"
          type="success"
          icon="el-icon-plus"
          v-if="$accessCheck($Access.ROLE_ADD)"
          @click="$router.push('/base/role/add')"
        >
          添加角色
        </el-button>
      </div>
    </div>
    <el-table
      :data="items"
      size="medium"
      @row-dblclick="dbClick"
      :height="parseInt($store.state.pageHeight)-350"
    >
      <el-table-column
        prop="id"
        align="center"
        label="编号"
      />
      <el-table-column
        prop="roleName"
        align="center"
        label="角色名称"
      />
      <el-table-column
        prop="status"
        align="center"
        label="状态"
      >
        <template slot-scope="scope">
          {{ parseInt(scope.row.status)===1?"启用":"禁用" }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="创建时间"
      >
        <template slot-scope="scope">
          {{ scope.row.createTime | formatDate }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="更新时间"
      >
        <template slot-scope="scope">
          {{ scope.row.updateTime? $_util.formatDate(scope.row.updateTime) : '--' }}
        </template>
      </el-table-column>
      <el-table-column
        v-if="$accessCheck($Access.ROLE_REMOVE)"
        key="removerole"
        align="center"
        label="操作"
      >
        <template slot-scope="scope">
          <!--          <el-button-->
          <!--            size="mini"-->
          <!--            type="warning"-->
          <!--            @click="action(scope.row)"-->
          <!--          >-->
          <!--            {{ parseInt(scope.row.status)===1?"禁用":"启用" }}-->
          <!--          </el-button>-->
          <el-button
            v-if="scope.row.roleName!=='超级管理员'"
            size="mini"
            type="danger"
            @click="remove(scope.row.id)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <FooterPage
      :page-size="pre_page"
      :total-page="total_count"
      :current-page="page"
      @pageChange="pageChange"
      @sizeChange="sizeChange"
    />
  </div>
</template>
<script>
  import FooterPage from '@/component/common/FooterPage'
  export default {
    name: 'RoleList',
    components: {
      FooterPage
    },
    data () {
      return {
        search: {
          roleName: ''
        },
        types: [],
        items: []
      }
    },
    created () {
      this.getItems()
    },
    activated () {
      if (this.$_isInit()) return
      this.getItems()
    },
    methods: {
      f5 () {
        this.getItems()
      },
      action ({ id, status }) {
        console.log(id, status)
      },
      remove (id) {
        this.$confirm('确定要删除角色吗？', '确认删除', {
          distinguishCancelAndClose: true
        })
          .then(() => {
            this.$service.gzl.removeRole(id).then(() => {
              this.$message.success('角色删除成功')
              this.getItems()
            })
          })
      },
      dbClick (row) {
        this.$router.push(`/base/role/edit/${row.id}`)
      },
      searchData () {
        this.page = 1
        this.getItems()
      },
      async getItems () {
        const params = {
          page: this.page,
          pageSize: this.pre_page,
          roleName: this.search.roleName
        }
        const { data } = await this.$service.gzl.queryRoleList(params)
        this.items = data.data.records
        this.total_count = data.data.total
      },
      pageChange (page) {
        this.page = page
        this.getItems()
      },
      sizeChange (size) {
        this.pre_page = size
        this.getItems()
      }
    }
  }
</script>

<style scoped>
  .header{
    padding: 10px;
    font-size: 14px;
    border-bottom: 1px solid #eee;
  }
  .header-item{
    display: inline-block;
    margin-right: 10px;
  }
</style>
